import React             from 'react';
import { Link }          from 'react-router-dom';
import PageTitle         from 'component/page-title/index.jsx';
import Pagination        from 'util/pagination/index.jsx';
import TableList         from 'util/table-list/index.jsx';
import Product           from 'service/product-service.jsx';
import MUtil             from 'util/mm.jsx';
import ListSearch        from './index-list-search.jsx';


import './index.scss';

const _product = new Product();
const _mm   = new MUtil();
class ProductList extends React.Component{
    constructor(props){
        super(props);//对list进行初始化不是数组无法调用map
        this.state = {
            list         :[],
            pageNum      : 1,
            listType     : 'list'
        }
    }
    //组件将要更新完成时
    componentDidMount(){
        this.loadProductList();
    }
    //加载商品信息
    loadProductList(){
        let listParam = {};
        listParam.pageNum = this.state.pageNum;
        listParam.listType = this.state.listType;
        //如果是搜索的话需要传入搜索类型
        if(this.state.listType === 'search'){
            listParam.searchType = this.state.searchType;
            listParam.keyword    = this.state.searchKeyword;
        }
        //请求接口
        _product.getProductList(listParam).then(res => {
            this.setState(res);
        },errMsg => {
            this.setState({
                list : []//list清空是为了在页面里提示出错误信息
            });
            _mm.errorTips(errMsg);
        });
    }
    //页数发生变化
    onPageNumChange(pageNum){
        this.setState({
            pageNum : pageNum
        },() => {
            this.loadProductList();
        });
    }
    //改变商品状态，上架或下架
    onSetProductStatus(e,productId,currentStatus){
          let newStatus   = currentStatus == 1 ? 2 : 1,
              confirmTips = currentStatus == 1 ? '确定要下架该商品吗' : '确定要上架该商品吗';
          if(window.confirm(confirmTips)){
             _product.setProductStatus({
                productId : productId,
                status    : newStatus
             }).then(res => {
                 _mm.successTips(res);
                  //重新加载列表
                this.loadProductList();
             },errMsg => {
                _mm.errorTips(errMsg);
               
             })
          } 
    }
    //搜索
    onSearch(searchType,searchKeyword){
        let listType = searchKeyword === '' ? 'list' : 'search';//如果空的话按商品列表加载
        this.setState({
            listType      : listType,
            pageNum       : 1,
            searchType    : searchType,
            searchKeyword : searchKeyword
        },() => {this.loadProductList()});
    }

     render(){
       let tableHeads = [
          {name: "商品ID",width: '10%'},
          {name: "商品信息",width : '50%'},
          {name: "价格",width: '10%'},
          {name: "状态",width: '15%'},
          {name: "操作",width: '15%'}
       ];
         return (
             <div id="page-wrapper">
                 <PageTitle title="商品列表">
                     <div className="page-header-right">
                         <Link to="/product/save" className="btn btn-info" >
                             <i className="fa fa-plus"></i>
                             <span>添加商品</span>
                         </Link>
                     </div>
                 </PageTitle>
                 <ListSearch onSearch={(searchType,searchKeyword) => {this.onSearch(searchType,searchKeyword)}}/>
                 <TableList tableHeads = {tableHeads}>
                     {
                        this.state.list.map((product,index) => {
                            return (
                                <tr key={index}>
                                    <td>{product.id}</td>
                                    <td>
                                        <p>{product.name}</p>
                                        <p>{product.subtitle}</p>
                                    </td>
                                    <td>￥{product.price}</td>
                                    <td>
                                        <p>{product.status == 1 ? "在售" : "已下架"}</p>
                                        <button className="btn btn-xs btn-warning" onClick={(e) => {this.onSetProductStatus(e,product.id,product.status)}}>{product.status == 1 ? "下架" : "上架"}</button>
                                    </td>
                                    <td>
                                    <Link to={`/product/detail/${product.id}`}>查看详情</Link>{/*模板的方式*/}
                                    <br/>
                                    <Link to={`/product/save/${product.id}`}>编辑</Link>
                                    </td>
                                </tr>
                                );
                           })
                 }
                 </TableList>
                 <Pagination current={this.state.pageNum} total={this.state.total} onChange = {(pageNum) => {this.onPageNumChange(pageNum)}}/>  
             </div>
          );
     }
   }

   export default ProductList;